import { Tree, Button, Select } from 'antd'
import { useState } from 'react'

// 平级数据
export const TableNav001 = () => {
    return <div></div>
}
const options = [
    { value: 0, label: '全部' },
    { value: 1, label: '新增' },
    { value: 2, label: '续建' },
    { value: 3, label: '完工' },
    { value: 4, label: '在建' },
]

// 树形数据
export const TableNavTree001 = ({ data, ActiveEvent, active, expandedKeys, SelectEvent, select }) => {
    const [allArr, setAllArr] = useState(expandedKeys)
    const [Active, setActive] = useState([active])
    const onSelect = e => {
        setActive(e)
        document.dispatchEvent(new CustomEvent('prize', { detail: e }))
        ActiveEvent.emit({
            active: e[0],
            expanded: allArr,
        })
    }

    const onOptions = e => SelectEvent.emit(e)

    return (
        <>
            <div className="options">
                <Button type="link" onClick={() => setAllArr(data.map(item => item.uuid))}>
                    全部展开
                </Button>
                <Button type="link" onClick={() => setAllArr([])}>
                    全部收起
                </Button>
                <Select options={options} value={select} onChange={onOptions} />
            </div>
            <div className="tree">
                <Tree
                    blockNode
                    expandedKeys={allArr}
                    selectedKeys={Active}
                    onExpand={e => setAllArr(e)}
                    onSelect={onSelect}
                    treeData={data}
                    fieldNames={{ key: 'uuid', title: 'tableName' }}
                />
            </div>
        </>
    )
}
